<template>
    <div class="supplier_detail">
        <van-nav-bar title="增类" left-text="返回" left-arrow @click-left="goBack" />
        <div class="supplier_detail_top">
            <div class="supplierName">{{ detailInfo.supplierName }}</div>
            <div class="nums">
                <div class="nums_div">
                    <div class="nums_number">{{ detailInfo.productsCount }}</div>
                    <div class="nums_name">货品总数</div>
                </div>
                <div class="nums_div">
                    <div class="nums_number">{{ detailInfo.productsShopping }}</div>
                    <div class="nums_name">上架总数</div>
                </div>
                <div class="nums_div">
                    <div class="nums_number">{{ detailInfo.productsOpt }}</div>
                    <div class="nums_name">选品数</div>
                </div>
            </div>
        </div>
        <div class="supplier_detail_content">
            <div class="supplier_detail_content_div supplier_detail_content_divorder">
                <div class="label">商家类型</div>
                <div class="value">{{ detailInfo.supplierType }}</div>
            </div>
            <div class="supplier_detail_content_div supplier_detail_content_divorder">
                <div class="label">厂家地址</div>
                <div class="value">{{ detailInfo.addr }}</div>
            </div>
            <div class="supplier_detail_content_div supplier_detail_content_divorder">
                <div class="label">合作部门</div>
                <div class="value">{{ handleExtraData(detailInfo.extraData) }}</div>
            </div>
            <div class="supplier_detail_content_div">
                <div class="label">详细地址</div>
                <div class="value">{{ detailInfo.address }}</div>
            </div>
        </div>
        <div class="addClass" @click="addClass" v-throttle:click>
            <template v-if="loading">
                <van-loading type="spinner" size="24px" color="#fff"> 执行中...</van-loading>
            </template>
            <template v-else>
                增加品类
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { hmSupplierList, addType } from '@/api/supplierList/index'
import { showSuccessToast, showFailToast } from 'vant';

const route = useRoute()
const router = useRouter()
const detailInfo = ref<any>({})
/** 商品id */
const uniquekey = computed(() => {
    return route.params.id
})
/** 搜索供应商名称 */
const supplierName = computed(() => {
    return route.query.supplierName
})
/** 回退 */
const goBack = () => {
    router.push({
        path: `/researchAddSupplierClass`,
        query: {
            supplierName: supplierName.value
        }
    });
}
const loading = ref(false)
/** 获取详情 */
const getDetail = async () => {
    const res = await hmSupplierList({ id: uniquekey.value as any })
    detailInfo.value = res.rows[0]
}
/** 增加类 */
const addClass = async () => {
    loading.value = true
    try {
        await addType({ supplierId: uniquekey.value })
        loading.value = false
        showSuccessToast({ type: 'success', message: '增类成功' });
        router.push('/researchAddSupplierClass')
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('增类失败');
        }
        loading.value = false
    }
}
/** 品类回显 */
const handleExtraData = (data) => {
    if (data) {
        const list: any[] = []
        data.forEach((element: any) => {
            if (list.indexOf(element.recruiterDeptName) == -1) {
                list.push(element.recruiterDeptName)
            }
        });
        return list.join(',')
    }
}
getDetail()
</script>
<style lang="less" scoped>
.supplier_detail {
    width: 100%;
    height: calc(100vh - 44px);
    background-color: #F6FAFF;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;

    .supplier_detail_top {
        width: 98%;
        height: 20vh;
        padding: 20px;
        margin-top: 46px;
        box-sizing: border-box;
        border-radius: 3px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background: linear-gradient(180deg, #DDF0FE 0%, #FFFFFF 100%);

        .supplierName {
            width: 100%;
            height: 40%;
            font-size: 17px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
        }

        .nums {
            width: 80%;
            height: 40%;
            display: flex;
            align-items: center;
            font-size: 14px;
            justify-content: space-between;
            margin-left: 10%;

            .nums_div {
                text-align: center;

                .nums_name {
                    color: #B8BECA;
                }

                .nums_number {
                    font-size: 20px;
                    line-height: 35px;
                    font-weight: bold;
                }
            }

            .line {
                height: 100%;
                border: 1px solid #BBBBBB;
            }
        }
    }

    .supplier_detail_content {
        width: 98%;
        // height: 20vh;
        margin-top: 5px;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 3px;
        font-size: 13px;

        .supplier_detail_content_divorder {
            border-bottom: 1px solid #FAFAFF;
        }

        .supplier_detail_content_div {
            min-height: 35px;
            // height: 25%;
            width: 90%;
            margin-left: 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .label {
                width: 80px;
            }

            .value {
                width: calc(100% - 80px);
                color: #B8BECA;
                display: flex;
                justify-content: flex-end;
            }
        }
    }

    .title {
        width: 100%;
        padding: 10px 20px;
    }

    .titles {
        width: 100%;
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .supplier_detail_contract {
        width: 98%;
        // height: 10vh;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 3px;
        font-size: 13px;

        .supplier_detail_content_div {
            height: 35px;
            // height: 50%;
            width: 90%;
            margin-left: 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .addClass {
        position: fixed;
        bottom: 50px;
        width: 40%;
        background-color: #1466FF;
        height: 30px;
        text-align: center;
        color: #fff;
        line-height: 30px;
        font-size: 12px;
        border-radius: 5px;
    }

    :deep(.van-nav-bar) {
        background-color: #1466FF;
        height: 46px !important;
        width: 100%;
        position: fixed;
    }

    :deep(.van-nav-bar__text) {
        color: #fff;
    }

    :deep(.van-icon) {
        color: #fff;
    }
}
</style>